<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .del {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add">新增</button>
        <table border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in table">
                    <td>{{item.id}}</td>
                    <td :class="{del:item.isdel}">{{item.name}}</td>
                    <td>{{item.class_id}}</td>
                    <td>
                        <button @click="graduation (item.id)" :disabled="item.isdel">毕业</button>
                        <button @click="edit(item.id)" :disabled="item.isdel">编辑</button>
                        <button @click="del(item.id)" :disabled="item.isdel">删除</button>
                    </td>
                </tr>

            </tbody>
        </table>


        <form v-show="isShow">
            <label>姓名</label>
            <input type="text" v-model="form.name">
            <br />
            <label>班级</label>

            <select v-model="form.class">
                <option v-for="item in classList" :value="item.id">{{item.class}}</option>
            </select>
            <br />
            <button type="button" @click='submit'>提交</button>
            <button type="button" @click='closeForm'>关闭</button>
        </form>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    form: {



                        name: null,
                        class: null
                    },
                    isEdit: false,
                    isShow: false,
                    table: [
                        {
                            id: 1,
                            name: '佐助',
                            class_id: 1,
                            isdel: false

                        },
                        {
                            id: 2,
                            name: '鸣人',
                            class_id: 1,

                        },
                        {
                            id: 3,
                            name: '小樱',
                            class_id: 1,

                        },
                        {
                            id: 4,
                            name: '雏田',
                            class_id: 1,

                        },
                    ],
                    classList: [
                        {
                            id: 1,
                            class: '1班'
                        },
                        {
                            id: 2,
                            class: '2班'
                        },
                        {
                            id: 3,
                            class: '3班'
                        },
                        {
                            id: 4,
                            class: '4班'
                        },
                    ]
                }
            },
            
            filters: {
                classFilters(val, _class) {
                    const index = _class.findIndex(item => item.id === val)
                    return _class[index].name
                }
            },
            methods: {
                //表单添加
                submit() {
                    //如果isEdit为false，代表新增
                    if (!this.isEdit) {
                        const obj = {
                            id: Date.now(),
                            name: this.form.name,
                            class_id: this.form.class,
                            isdel: false
                        }
                        this.table.unshift(obj)
                        this.form.name = null
                        this.form.class = null
                    } else {
                        const index = this.table.findIndex(item => item.id === this.form.id)
                        this.table[index].name = this.form.ame
                        this.table[index].class_id = this.form.class
                    }
                    this.clearFrom()

                },
                add() {
                    this.isShow = true
                },
                //表单编辑
                edit(id) {
                    const index = this.table.findIndex(item => item.id === id)
                    console.log(index);
                    row = this.table[index]
                    this.form.name = row.name
                    this.form.class = row.class_id
                    this.form.id = row.id
                    this.isEdit = true
                    this.isShow = true
                },
                //数据删除
                del(id) {
                    const result = confirm('确认删除嘛？删除后不能找回!')
                    if (result) {
                        const index = this.table
                    }

                },
                clearFrom() {
                    this.form.name = null
                    this.form.class = null
                    this.isShow = false
                },
                //关闭模态框
                closeForm() {
                    this.isShow = false
                },
                graduation(id) {
                    const index = this.table.findIndex(item => item.id === id)
                    this.table[index].isdel = true
                }


            }
        })
    </script>

</body>

</html>